$.Box = $.extend($.Component, {
	width: 'auto'
	,height: 'auto'
	,minWidth: null
	,minHeight: null
	,maxWidth: null
	,maxHeight: null
	,autoRender: false
	,cls : null
	,style: null
	,hidden: false
	,disabled: false
	,disabledClass: 'x-box-disabled'
	
	,constructor: function(el, config){
		this.el = el;
		$.apply(this, config);
		
		this.addEvents(
			'beforerender'
			,'render'
			,'hide'
			,'show'
			,'disable'
			,'enable'
			,'resize'
			,'beforeadd'
			,'add'
			,'remove'
		);
		
		$.Box.superclass.constructor.call(this, config);
		
		this.init();
	}
	
	,init: function(){
		$.Box.superclass.init.call(this);
		
		if(this.render) this.render();
	}
	
	,render: function(){
		var me = this;
		if(me.rendered || me.fireEvent('beforerender', me) === false) return this;
		
		me.el = $.get(me.el) || $.get($.DomHelper.createDom(me.el));
		
		me.el.on('resize', function(){
			me.fireEvent('resize', this);
		});
		
		if($.isNumber(this.width)) this.setWidth(this.width);
		if($.isNumber(this.height)) this.setHeight(this.height);
		
		if(this.hidden) this.hide(false);
		if(this.disabled) this.disable(false);
		
		if(this.items) this.add(this.items, false);
		
		me.rendered = true;
		me.fireEvent('render', this);
		return this;
	}
	
	,getEl: function(){
		return this.el;	
	}
	
	,getClass: function(returnString){
		var class = this.el.getAttribute('class').trimAll();
		return returnString? class : class.split(' ');
	}
	
	,setClass: function(cls){
		if($.isArray(cls)) cls = cls.join(' ');
		else cls = cls.trimAll();
		
		this.el.dom.className = cls;
		return this;
	}
	
	,addClass: function(cls){
		this.el.addClass(cls);
		return this;
	}
	
	,removeClass: function(cls){
		this.removeClass(cls);
		return this;
	}
	
	,getWidth: function(){
		return this.el.getWidth();
	}
	
	,getHeight: function(){
		return this.el.getHeight();
	}
	
	,getSize: function(){
		return [this.el.getWidth(), this.el.getHeight()];
	}
	
	,setWidth: function(w){
		w = this.minWidth && this.minWidth > w? this.minWidth : w;
		w = this.maxWidth && this.maxWidth < w? this.maxWidth : w;
		
		this.el.setWidth(w);
		return this;
	}
	
	,setHeight: function(h){
		h = this.minHeight && this.minHeight > h? this.minHeight : h;
		h = this.maxHeight && this.maxHeight < h? this.maxHeight : h;
		
		this.el.setHeight(h);
		return this;
	}
	
	,setSize: function(w, h){
		this.el.setWidth(w).setHeight(h);
		return this;
	}
	
	,isVisible: function(){
		return this.el.isVisible();	
	}
	
	,setVisible: function(visible, animate, fireEvent){
		visible? this.el.show(animate) : this.el.hide(animate);
		this.hidden = visible;
		
		if(false !== fireEvent) this.fireEvent(visible? 'show' : 'hide', this);
		return this;
	}
	
	,toogleVisible: function(animate){
		return this.setVisible(!this.isVisible(), animate);
	}
	
	,hide: function(animate, fireEvent){
		return this.setVisible(false, animate, fireEvent);
	}
	
	,show: function(fireEvent){
		return this.setVisible(true, animate, fireEvent);
	}
	
	,setDisabled: function(disabled, fireEvent){
		disabled? this.addClass(this.disabledClass) : this.removeClass(this.disabledClass);
		this.disabled = disabled;
		
		if(false !== fireEvent) this.fireEvent(disabled? 'disable' : 'enable', this);
		return this;
	}
	
	,enable: function(fireEvent){
		return this.setDisabled(false, fireEvent);
	}
	
	,disable: function(fireEvent){
		return this.setDisabled(false, fireEvent);	
	}
	
	,setX: function(x, animate){
		this.el.setX(x, animate);
		return this;	
	}
	
	,setY: function(y, animate){
		this.el.setY(y, animate);
		return this;	
	}
	
	,setXY: function(xy, animate){
		this.el.setXY(xy, animate);
	}
	
	,add: function(cmp, fireEvent){
		$.each(cmp, function(item){
			if(false === this.fireEvent('beforeadd', this, item)) return this;
			
			this.el.appendChild(item.getEl());
			if(false !== fireEvent) this.fireEvent('add', this,item);
		}, this);
		
		return this;
	}
});